import React from 'react';
// 导入connect高阶组件
import { connect } from 'react-redux';
// 导入actions
import { get_message, add_message, del_message, get_message_async } from '../redux/actions';
class Message extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: '',
            author: ''
        }
    }
    contentChange(e) {
        this.setState({
            content: e.target.value
        });
    }

    authorChange(e) {
        this.setState({
            author: e.target.value
        });
    }

    // 发布留言
    addHandle = () => {
        const { content, author } = this.state;
        if (content === '' || author === '') {
            return alert('请填写完整的留言内容!');
        }
        // 添加留言
        this.props.add_message({ content, author, createTime: new Date() });
        // 重置表单
        this.setState({
            content: '',
            author: ''
        });
    }
    // 删除留言
    delHandle(id) {
        this.props.del_message(id);
    }

    componentDidMount() {
        // this.props.get_message_async([]);
    }
    queryData(){
        this.props.get_message_async([]);
    }
    render() {
        // 获取初始数据
        const message = this.props.message;
        return (
            <div className="container">
                <h1>留言板-Redux版</h1>
                <button onClick={()=>this.queryData()} className="btn btn-xs btn-success">加载数据</button>
                <hr />
                <div className="alert">
                    <form className="form-horizontal">
                        <div className="form-group">
                            <textarea value={this.state.content} onChange={(e) => this.contentChange(e)} style={{ resize: 'none' }} className="form-control" placeholder="请输入留言内容"></textarea>
                        </div>
                        <div className="form-group">
                            <input value={this.state.author} onChange={(e) => this.authorChange(e)} type="text" className="form-control" placeholder="请输入留言人" />
                        </div>
                        <div className="form-group">
                            <button onClick={() => this.addHandle()} type="button" className="btn btn-success">提交留言</button>
                        </div>
                    </form>
                </div>
                <hr />
                <ul className="list-group">
                    {
                        message.map(item => (
                            <li key={item.id} className="list-group-item">
                                <p>{item.content}</p>
                                <p className="clearfix">
                                    <small className="pull-left">留言人:{item.author}</small>
                                    {/* 直接输出Date对象会报错 */}
                                    <small className="pull-right">{item.createTime.toLocaleDateString()}</small>
                                </p>
                                <p className="clearfix">
                                    <button className="btn btn-xs btn-warning" onClick={() => this.delHandle(item.id)}>删除</button>
                                </p>
                            </li>
                        ))
                    }

                </ul>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({ message: state.message });
const mapActionToProps = { get_message, add_message, del_message, get_message_async };
export default connect(mapStateToProps, mapActionToProps)(Message);